<template>
  <div class="class-info-page">
    <div class="header">
      <div class="header-left">
        <h2 class="page-title">班级信息</h2>
      </div>
      <div class="header-right">
        <el-select v-model="gradeId" size="small" placeholder="选择年级">
          <el-option
            v-for="{ id, name } in gradeList"
            :key="id"
            :label="name"
            :value="id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="toAddClass" icon="el-icon-plus">新增班级</el-button>
      </div>
    </div>
    
    <div class="content">
      <ClassListView :gradeId="gradeId" />
    </div>
  </div>
</template>

<script>
import ClassListView from '@/components/schoolmanage/ClassListView.vue';
import eventBus from '@/utils/eventBus';
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  name: 'ClassInfoPage',
  components: {
    ClassListView
  },
  data() {
    return {
      loading: false,
      gradeList: [],
      gradeId: 0
    };
  },
  computed: {
    ...mapState('school', ['schoolOptions', 'currentSchoolId']),
    ...mapGetters('school', ['schoolName']),
    schoolId() {
      return this.currentSchoolId;
    }
  },
  watch: {
    schoolOptions: {
      handler() {
        this.getGradeList();
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    this.getGradeList();
  },
  methods: {
    ...mapActions('school', ['GET_SCHOOL_LIST', 'GET_SCHOOL_OPTIONS']),
    
    async initData() {
      this.loading = true;
      try {
        await this.GET_SCHOOL_LIST();
        
        if (this.schoolId) {
          await this.GET_SCHOOL_OPTIONS({
            school_id: this.schoolId
          });
        }
      } catch (error) {
        console.error('初始化班级信息数据出错:', error);
        this.$toast('加载班级信息数据失败，请刷新页面重试');
      } finally {
        this.loading = false;
      }
    },
    
    getGradeList() {
      this.gradeList = [];
      const { F_grades } = this.schoolOptions || { F_grades: {} };
      
      for (let k of Object.keys(F_grades || {})) {
        const grade = this.$maps.gradeList.find((e) => e.id === +k);
        if (grade) {
          this.gradeList.push({...grade});
        }
      }
      
      if (this.gradeList.length && !this.gradeId) {
        this.gradeId = this.gradeList[0].id;
      }
    },
    
    toAddClass() {
      eventBus.$emit('to-add-class');
    }
  }
};
</script>

<style lang="less" scoped>
.class-info-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  
  .header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    
    .header-left {
      .page-title {
        font-size: 18px;
        color: #303133;
        margin: 0;
      }
    }
    
    .header-right {
      display: flex;
      align-items: center;
      
      .el-select {
        width: 120px;
        margin-right: 15px;
      }
    }
  }
  
  .content {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
}
</style> 